.moveBg {
  position: fixed;
  inset: 0;

  .isTop {
    .box-center-center {
      filter: none !important;
      box-shadow: 0 0 20px #202020 !important;
    }
  }

  .isMaxShowing {
    inset: 23px -5px 86px !important;
  }

  .isFullScreen {
    position: fixed !important;
    top: -5px !important;
    bottom: -5px !important;
    z-index: 999 !important;
  }

  .isMaxShowing .box-center-center,
  .isFullScreen .box-center-center {
    border-radius: 0 !important;
  }

  .box-animation {
    transition:
      width 0.1s,
      height 0.1s,
      left 0.1s,
      right 0.1s,
      top 0.1s,
      bottom 0.1s;
  }

  .resize-disabled {

    .box-top,
    .box-top-left,
    .box-top-center,
    .box-top-right,
    .box-left,
    .box-center-left,
    .box-center-right,
    .box-right,
    .box-bottom,
    .box-bottom-left,
    .box-bottom-center,
    .box-bottom-right {
      cursor: default !important;
    }
  }

  .box {
    --resize: 5px;
    --resize-bg: transparent;
    --resize-main: transparent;
    --resize-bg-main: transparent;

    position: absolute;
    display: flex;
    flex-direction: column;
    pointer-events: auto;

    .box-top {
      display: flex;
      flex-direction: row;

      .box-top-left {
        width: var(--resize);
        height: var(--resize);
        cursor: nw-resize;
        background: var(--resize-bg);
      }

      .box-top-center {
        flex-grow: 1;
        height: var(--resize);
        cursor: n-resize;
        background: var(--resize-bg-main);
      }

      .box-top-right {
        width: var(--resize);
        height: var(--resize);
        cursor: ne-resize;
        background: var(--resize-bg);
      }
    }

    .box-center {
      display: flex;
      flex-grow: 1;
      flex-direction: row;

      .loader {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        width: 100%;
      }

      .box-center-left {
        width: var(--resize);
        height: 100%;
        cursor: w-resize;
        background: var(--resize-bg-main);
      }

      .box-center-center {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background: var(--wos-box-center-bg);
        filter: grayscale(1) brightness(0.9);
        backdrop-filter: blur(20px);
        border-radius: 6px;
        box-shadow: 0 0 3px #999;

        .app-bar {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          background: var(--wos-app-bar-bg);
          backdrop-filter: blur(20px);
          border-bottom: var(--wos-box-border-color) solid 1px;

          .title {
            flex-grow: 1;
            margin-right: 84px;
            font-size: 13px;
            font-weight: 500;
            color: var(--wos-app-bar-color);
            text-align: center;
            text-shadow: none;
            cursor: move;
          }

          .browser {
            margin-left: 16px;
            flex-grow: 1;
            font-size: 13px;
            font-weight: 500;
            color: var(--wos-app-bar-color);
            text-align: center;
            text-shadow: none;
            cursor: move;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width:100%;
            gap: 16px;

            .navigation{
              display: flex;
              align-items: center;
              justify-content: center;
            }

            
            
            .address{
              position: relative;
            input.link {
              width: 420px;
              padding: 0 24px;
              text-align: center;
              border-radius: var(--radius);
              -webkit-border-radius: var(--radius);
              -moz-border-radius: var(--radius);
              -ms-border-radius: var(--radius);
              -o-border-radius: var(--radius);
              &:focus {
                outline: none;
                &::placeholder {
                  text-align: center;
                }
              }
            }
            .refresh{
              position: absolute;
              top:4px;
              right: 8px;
            }
          }

          .extra{
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: center;
            margin-right: 16px;

          }
          }

          .controll {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: center;
            margin-left: 16px;

            div.icon-box {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 16px;
              height: 16px;
              line-height: 16px;
              cursor: pointer;
              border-radius: 100%;
            }

            .icon {
              font-size: 12px;
              color: #282828;
              opacity: 0;
            }

            &:hover {
              .icon {
                opacity: 1;
              }

              .full-disabled {
                .icon {
                  opacity: 0;
                }
              }
            }

            .close {
              background: #fc605c;
            }

            .close:hover {
              background: #cc2c26;
            }

            .min {
              background: #fcbb40;
            }

            .min:hover {
              background: #c28719;
            }

            .full {
              background: #34c648;
            }

            .full:hover {
              background: #1f942e;
            }

            .full-disabled {
              background: #ccc !important;
            }
          }
        }

        .app-body {
          display: flex;
          flex-grow: 1;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 0;
        }
      }

      .box-center-right {
        width: var(--resize);
        height: 100%;
        cursor: e-resize;
        background: var(--resize-bg-main);
      }
    }

    .box-bottom {
      display: flex;
      flex-direction: row;

      .box-bottom-left {
        width: var(--resize);
        height: var(--resize);
        cursor: sw-resize;
        background: var(--resize-bg);
      }

      .box-bottom-center {
        flex-grow: 1;
        height: var(--resize);
        cursor: s-resize;
        background: var(--resize-bg-main);
      }

      .box-bottom-right {
        width: var(--resize);
        height: var(--resize);
        cursor: se-resize;
        background: var(--resize-bg);
      }
    }
  }
}
